<template>
  <div class="layoutSide">
    <div class="side-menu-body-wrap">
      <a-menu
        :selectedKeys="current"
        :openKeys="current"
        mode="inline"
        @click="handleClick"
        @openChange="onOpenChange"
      >
        <template v-for="barItem in menuList">
          <a-sub-menu
            v-if="barItem.child"
            :key="barItem.title"
            @clkck="subMunuClick(barItem)"
          >
            <span slot="title">
              <span :class="{ titleActived: titleActieved(barItem.title) }">{{
                barItem.title
              }}</span>
            </span>
            <template v-for="item in barItem.child">
              <a-menu-item
                :key="item.value"
                class="iconItem"
                :style="icon ? '' : 'padding-left: 48px;'"
                v-if="!item.child"
              >
                <img
                  src="../../assets/images/icon位置3.png"
                  alt=""
                  v-if="icon"
                />
                {{ item.title }}
              </a-menu-item>
              <a-sub-menu v-else :key="item.value">
                <span slot="title">
                  <span :class="{ titleActived: titleActieved(item.title) }">
                    {{ item.title }}
                  </span>
                </span>
                <a-menu-item v-for="ele in item.child" :key="ele.value">
                  <span>{{ ele.title }}</span>
                </a-menu-item>
              </a-sub-menu>
            </template>
          </a-sub-menu>
          <a-menu-item v-else :key="barItem.value" class="pubserve">
            {{ barItem.title }}
          </a-menu-item>
        </template>
      </a-menu>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    menuList: Array,
    selectKeys: {
      type: Array,
      default: () => []
    },
    icon: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      current: []
    }
  },
  computed: {
    rootSubmenuKeys() {
      const subKeys = this.menuList.reduce((pre, cur) => {
        pre.push(cur.title)
        return pre
      }, [])
      return subKeys
    }
  },
  mounted() {
    this.settingCurrentKey()
  },
  watch: {
    selectKeys: {
      handler: function () {
        this.settingCurrentKey()
      },
      // 深度观察监听
      deep: true,
    }
  },
  methods: {
    onOpenChange(openKeys) {  //只允许打开一个subMenu
      const latestOpenKey = openKeys.find(key => this.current.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.current = openKeys;
      } else {
        this.current = latestOpenKey ? [latestOpenKey] : [];
      }
      this.$emit('subMenu', openKeys[openKeys.length - 1], this.current)
    },
    settingCurrentKey() {
      if (this.selectKeys && this.selectKeys.length !== 0) {
        this.current = this.selectKeys
      } else {
        this.current = [this.menuList[0].value]
      }
    },
    setCurrentKeys(keyPath) { //在菜单层限制需跳转第三方页面的路由选中
      const linkJimp = ['thinkSub', 'evidentOnline', 'adjudicGuide', 'mediateGuide', 'noOpen', 'caseSub']
      if (!keyPath || linkJimp.indexOf(keyPath[0]) !== -1) return
      this.current = keyPath
    },
    handleClick(e) {
      const { key, keyPath } = e
      this.setCurrentKeys(keyPath)
      this.$emit('sideMenuClick', key)
    },
    titleActieved(key) {
      return this.current.includes(key)
    }
  }
}
</script>


